<template>
    <div id="app">  
    <!-- 顶部导航栏 -->  
    <nav class="navbar">  
      <img src="/logo.png" alt="图表信息" class="icon" />
          
      <ul>  
        <li><router-link to="/main">首页</router-link></li>  
        <li><router-link to="/search">全部商品</router-link></li>  
        <li><router-link to="/webdate">销售统计</router-link></li>  
        <!-- 添加更多导航链接 -->  
      </ul>  
    </nav>
    <div class="card-container">  
      <div class="card">  
      

      </div>  
    </div>   
    </div>
</template>
<script>

import axios from 'axios';
export default{
    data(){
        return{
            username:'',
        }
    },
    mounted(){
        this.username = localStorage.getItem("username");
        console.log(this.username)
    },
    methods:{

    }
}
</script>

<style scoped>
#app {  
  display: flex;  
  flex-direction: column;  
  height: 100vh; /* 使应用占据整个视口高度 */  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
.navbar {  
   /* 固定在顶部 */  
  top: 0;  
  left: 0;  
  right: 0;  
  height: 100px; /* 设置导航栏高度 */  
  background-color: #333; /* 设置背景颜色 */  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  
}  
  
.navbar ul {  
  list-style-type: none;  
  margin: 0;  
  padding: 0;  
  display: flex;
  padding-left: 50px; /* 设置内边距，让文字离左边有一定的距离 */  
  
}  
  
.navbar li {  
  margin: 0 10px;  
}  
  
.navbar li a {  
  color: white;  
  text-decoration: none;  
} 
.card-container {  
   
   padding: 80px;  
   border-radius: 5px;  
   /* 设置卡片的高度和宽度 */  
   height: 300px; /* 您可以根据需要调整这个值 */  
   width: 90%; 
   
 }
 
 .card {  
   background-color: #fff;  
   padding: 20px;  
   border-radius: 5px;  
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
 }  
</style>